
<template>
  <div v-show="popJoinBool" class="model-box" @click.stop="closeModel1">
    <div class="con-box" @click.stop="popStop">
      <h5>加盟咨询</h5>
      <div class="con-body">
        <div class="flex-use">
          <span>您的称呼:</span>
          <el-input v-model="names" placeholder="如何称呼您" maxlength="22" clearable type="text" :validate-event="true" />
        </div>
        <div class="flex-use">
          <span>您的电话:</span>
          <el-input v-model="phone" placeholder="请输入电话" minlength="11" maxlength="11" clearable text="number" :validate-event="true" />
        </div>
      </div>
      <button @click="zixun">立即咨询</button>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      names: '',
      phone: ''
    }
  },
  computed: {
    popJoinBool() {
      return this.$store.state.template1.popJoin
    }
  },
  methods: {
    closeModel1() {
      this.$store.commit('template1/changePopJoin', false)
    },
    zixun() {
      this.$store.commit('template1/changePopJoin', false)
      this.$store.commit('template1/changePop1', true)
    },
    popStop() {}
  }
}
</script>

<style lang="scss" scoped>
.model-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  padding-top: 200px;
  color: #333;
  z-index: 99;
  >.con-box{
    position: relative;
    width: 628px;
    height: 347px;
    margin: 0 auto;
    background-color: #fff;
    >h5{
      width: 100%;
      height: 71px;
      line-height: 71px;
      border-bottom: 1px solid #C4C4C4;
      font-size: 24px;
      color: #333;
      text-align: center;
      margin-bottom: 44px;
    }
    >.con-body{
      padding: 0 83px 40px 81px;
      >.flex-use{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        >span{
          width: 72px;
        }
        >.el-input{
          width: 380px;
        }
      }
      >div:first-child{
        margin-bottom: 20px;
      }
    }
    >button{
      display: block;
      width: 170px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
      border-radius: 4px;
      color: #666;
      background-color: #fff;
      border: 1px solid #DBDBDB;
      margin: 0 auto;
    }
  }
}
</style>

